<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <!-- BootStrap样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/zhuce.min.css" rel="stylesheet" />
  </head>
  <body>
    <div id="login">
      <form id="loginForm">
        <h3>用户登录</h3>
        <div class="input-group input-group-md">
          <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
          <input type="text" name="phone" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" />
        </div>
        <div class="input-group input-group-md">
          <span class="input-group-addon" id="sizing-addon2"><i class="glyphicon glyphicon-lock"></i></span>
          <!-- HTML内置验证： -->
          <!-- maxlength：限制字符串长度 -->
          <!-- required：非空验证 -->
          <input type="password" id="password" name="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon2" maxlength="32" required />
        </div>
        <div class="input-group input-group-md">
            <span class="input-group-addon" id="sizing-addon2"><i class="glyphicon glyphicon-lock"></i></span>
            <input type="password" id="password2" name="password2" class="form-control" placeholder="确认密码" aria-describedby="sizing-addon2" maxlength="32" required />
        </div>
        <!-- buttom在ios系统里有默认样式 -->
        <button type="submit" class="btn btn-success btn-block">注册</button>
      </form>
    </div>
    <!-- jQuery脚本 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- BootStrap脚本 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- jQuery验证脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="js/request.js"></script>
    <script>
      $(function () {
        // 表单验证
        $('#loginForm').validate({
          // 验证规则
          rules: {
            phone: {
              required: true,
              minlength: 6
            },
            password: {
              required: true,
              minlength: 8
            },
            password2: {
              required: true,
              minlength: 8,
              equalTo:"#password"
            }
          },
          // 触发规则时的提示信息
          messages: {
            phone: {
              required: '请输入用户名',
              minlength: jQuery.validator.format('电话至少输入 {0} 个字符')
            },
            password: {
              required: '请输入密码',
              minlength: jQuery.validator.format('密码至少输入 {0} 个字符')
            },
            password2: {
              required: '请输入密码',
              minlength: jQuery.validator.format('密码至少输入 {0} 个字符'),
              equalTo:"两次输入的不一样"
            }
          },
          // 验证完成后的提交事件
          submitHandler: function(form) {
            // 获取表单数据
            var data = $(form).serializeArray();
            // 发起登录请求
            $$.zhuce(data, function(data) {
              var token = data.token;
              localStorage.setItem('Token', token)
              location.href = '/login.html'
            })
          }
        })
      });
    </script>
  </body>
</html>
